<template>
<view class="box">
    <view class="header">
        <view class="text">{{comment_num }}条评论</view>
    </view>
<uni-load-more v-if="!loading" :status="loading ? '':'loading'" />
<view v-else class="mid">
    <view class="item-box"
    v-for="(item,index)  in commentData"
    :key="index"
    >
            <view class="left">
                <view class="user-img" :style="`--url:url(${item.user_img})`">

                </view></view>
            <view class="right">
                <view class="user-name">{{ item.nickname }} 
                    <view class="delete"  v-if="item.user_id == memberStore.userinfo.user_id" @click.stop="deleteComment(item.comment_id,-1,index)"><uni-icons
            type="trash"
            color="#FFADBB"
            size="24"
            circle

          /></view></view>
                <view class="content">{{ item.comment }}</view>
                <view class="content-img" v-if="item.url" @click="privewImg(item.url)" :style="`--url:url(${item.url})`"></view>
                <view class="feature-box">
                    <view class="left">
                        <view class="create_time">{{ createTime(item.create_time )}}</view>
                    <view class="reply" @click="replyCommentId(item.comment_id,item.nickname,index)">回复</view>
                </view>
                    <view class="right">
                        <uni-icons
                        @click="likeComment(item.comment_id,-1,index)"
                        :type="item.like_type?'heart-filled':'heart'"
                        :color="item.like_type? '#24edc2':'#afb0b4'"
                        size="24"
                    />
                        <view class="like_num">{{ item.like ? item.like :'' }}</view>
                    </view>
                </view>
                <view class="reply-box" 
                    v-if="item.show_type"
                v-for="(ritem,rindex) in item.children"
                :key="rindex"
                >
                    <view class="left">
                        <view class="user-img"  :style="`--url:url(${ritem.user_img})`"></view>
                    </view>
                    <view class="right">
                        <view class="user-name">
                            <view class="delete" v-if="ritem.user_id == memberStore.userinfo.user_id" @click.stop="deleteComment(item.comment_id,rindex,index)"><uni-icons
            type="trash"
            color="#FFADBB"
            size="22"
            circle

          /></view>
                            <span>{{ ritem.nickname }}</span><img v-if="ritem.to_nikename!=''" src="@/static/right.png" alt="" class="name-img"><span>{{ ritem.to_nickname }}</span>
                        
                        </view>
                        <view class="content">{{ ritem.comment }}</view>
                <view v-if="ritem.url != null" class="content-img" @click="privewImg(ritem.url)" :style="`--url:url(${ritem.url})`" ></view>
                        <view class="feature-box">
                    <view class="left">
                        <view class="create_time">{{ createTime(ritem.create_time) }}</view>
                    <view class="reply" @click="replyCommentId(ritem.comment_id,ritem.nickname,index)">回复</view>
                </view>
                    <view class="right">
                        <!-- <img src="@/static/like.png" alt="" class="like"> -->
                        <uni-icons
                        @click="likeComment(ritem.comment_id,rindex,index)"
                        :type="ritem.like_type?'heart-filled':'heart'"
                        :color="ritem.like_type? '#24edc2':'#afb0b4'"
                        size="24"
                    />
                        <view class="like_num">{{ ritem.like ? ritem.like :'' }}</view>
                    </view>
                </view>
                    </view>
                </view>
                <view class="bottom" v-if="item.son_num != 0">
                    <view class="more" @click="showMore(index,item.comment_id)" v-if="item.page_size*item.page_num < item.son_num">展开更多<img src="@/static/down.png" alt="" class="more-img"></view>
                    <view class="packup" v-if="item.show_type" @click="puckup(index)">收起<img src="@/static/top.png" alt="" class="packup-img"></view>
                </view>
            </view>
   
    </view>
  
</view>
<view class="footer"></view>

</view>

</template>
<script setup lang="ts">
import { GridItem } from 'vant';
import {ref,computed} from 'vue'
import {useMemberStore} from "@/stores/modules/member.ts"
const loading= ref(false)
const Prop = defineProps(['invitation_id','comment_num'])
const emit = defineEmits(['get-replyid'])
const memberStore = useMemberStore()
//删除评论
const deleteComment = (comment_id,rindex=-1,index)=>{
console.log('delete',comment_id);
uni.request({
    url: 'invitation/comment/delete/',
    data: {comment_id:comment_id},
    header: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
    },
    method: 'POST',
    sslVerify: true,
    success: ({ data, statusCode, header }) => {
        console.log(data);
    if(data.code == 200){
        if(rindex==-1){
            commentData.value.slice(index,1)
        }
        else{
            commentData.value[index].children.slice(rindex,1)
        }
    }
    else{
        uni.showToast({
            title: data.errmsg,
            icon: 'error',
            mask: true
        })
    }
    },
    fail: (error) => {}
})
}
//增加评论
const addComment=(data,index=-1)=>{
    console.log('dsalkj',data,index);
if(index==-1){
commentData.value.push({
comment:data.comment,
comment_id:data.comment_id,
create_time:data.create_time,
like:data.like,
like_type:data.like_type,
nickname:data.nickname,
son_num:data.son_num,
to_nickname:data.to_nickname,
url:'',
user_id:data.user_id,
user_img:data.user_img
})

}
else{
    console.log(index);
commentData.value[index].children.push({
comment:data.comment,
comment_id:data.comment_id,
create_time:data.create_time,
like:data.lkie,
like_type:data.like_type,
nickname:data.nickname,
son_num:data.son_num,
to_nickname:data.to_nickname,
url:data.url,
user_id:data.user_id,
user_img:data.user_img
})
}
}
//点赞评论 
const likeComment = (id,rindex,index)=>{
if(rindex==-1){
commentData.value[index].like_type=!commentData.value[index].like_type
}
else{
    commentData.value[index].children[rindex].like_type=!commentData.value[index].children[rindex].like_type
}
uni.request({
    url: 'invitation/comment/like/',
    data: {comment_id:id},
    header: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
    },
    method: 'POST',
    sslVerify: true,
    success: ({ data, statusCode, header }) => {
        if(data.code == 200){
            if(rindex==-1){commentData.value[index].like=!commentData.value[index].like_type?commentData.value[index].like-1:commentData.value[index].like+1}
            else{commentData.value[index].children[rindex].like=!commentData.value[index].children[rindex].like_type?commentData.value[index].children[rindex].like-1:commentData.value[index].children[rindex].like+1}
        
        }
        else{
            uni.showToast({
                title: data.errmsg,
                icon: 'error',
                mask: true
            })
        }
      
        
    },
    fail: (error) => {}
})
}
const page_data = ref({
    page_size:10,
    page_num:1,
    page_count:0
})
const privewImg=(url)=>{
    uni.previewImage({
        url:url,
        urls:[url]
    })
   }
   //获取评论
   uni.request({
    url: 'invitation/comment/',
    data: {
        invitation_id:Prop.invitation_id,
        page_num:page_data.value.page_num,
        page_size:page_data.value.page_size,
        parent_id:''
    },
    header: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
    },
    method: 'POST',
    sslVerify: true,
    success: ({ data, statusCode, header }) => {
        console.log('com',data);
        commentData.value=data.data.list
        commentData.value=commentData.value.map(item=>{return {...item,page_num:0,page_size:10,page_count:10,children:[]}})
        loading.value = true
    },
    fail: (error) => {}
   })
const replyCommentId = (id,nikename,index=-1)=>{
emit('get-replyid',id,nikename,index)
}
const showMore=(index,parent_id)=>{
commentData.value[index].show_type = true
commentData.value[index].page_num+=1
console.log(commentData.value[index].page_num,commentData.value[index].page_count);
if(commentData.value[index].page_num<=commentData.value[index].page_count){
    
uni.request({
    url: 'invitation/comment/',
    data: {
        invitation_id:Prop.invitation_id,
        page_num:commentData.value[index].page_num,
        page_size:commentData.value[index].page_size,
        parent_id:parent_id
    },
    header: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
    },
    method: 'POST',
    sslVerify: true,
    success: ({ data, statusCode, header }) => {
        console.log(data);
        if(data.code == 200){
            commentData.value[index].page_count=data.data.count
            commentData.value[index].children.push(...data.data.list)
            console.log(commentData.value);

            
        }
        else{
            uni.showToast({
                title: data.errmsg,
                icon: 'error',
                mask: true
            })
        }
        
    },
    fail: (error) => {}
})
}
}
const puckup=(index)=>{
    commentData.value[index].show_type = false
    commentData.value[index].page_num=0
}
const createTime = computed(()=>(date)=>{
    const nowdate = new Date()
    const createdate = new Date(date)
    const S = Math.ceil(Math.abs(nowdate-createdate)/1000)
    if(S <60){
        return S+'秒前'
    }
    if(S/60<60){
        return Math.ceil(S/60)+'分钟前'
    }
    if(S/3600<24){
        return Math.ceil(S/3600)+'小时前'
    }
    if(S/3600/24<24*4){
        return Math.ceil(S/3600/24)+'天前'
    }
    else{
        return date.split(" ")[0]
    }
   })

const commentData = ref([
    {
        comment_id:1,
        user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nikename:'打赏的',
        create_time:'2024-03-23 12:00:34',
        user_id:1,
        comment:'的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        like:1231,
        like_type:false,
        page_num:1,
        page_size:4,
        son_num:3,
        show_type:false,
        children:[
            {
                comment_id:34,
        user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nikename:'打赏的',
        to_nikename:'的撒开',
        create_time:'2024-03-23 12:00:34',
        user_id:3,
        comment:'的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        like:1231,
        like_type:false,
            },
            {
                comment_id:34,
        user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nikename:'地方撒',
        to_nikename:'打赏的',
        create_time:'2024-03-23 12:00:34',
        user_id:7,
        comment:'的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        like:0,
        like_type:false,
            },
            {
                comment_id:40,
        user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nikename:'地方撒',
        to_nikename:'打赏的',
        create_time:'2024-03-20 12:00:34',
        user_id:7,
        url:'',
        comment:'的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰',
        like:1,
        like_type:true,
            }
        ]

    },
    {
        comment_id:4,
        user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nikename:'打赏的',
        create_time:'2024-03-23 12:00:34',
        user_id:7,
        comment:'的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        like:1231,
        like_type:false,
        show_type:false,
        page_num:0,
        page_size:4,
        son_num:2,
        children:[
            {
                comment_id:34,
        user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nikename:'打赏的',
        to_nikename:'的撒开',
        create_time:'2024-03-23 12:00:34',
        user_id:3,
        comment:'的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url:'',
        like:1231,
        like_type:false,
            },
            {
                comment_id:34,
        user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nikename:'地方撒',
        to_nikename:'',
        create_time:'2024-03-23 12:00:34',
        user_id:7,
        comment:'的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        like:0,
        like_type:false,
            },
            {
                comment_id:40,
        user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nikename:'地方撒',
        to_nikename:'打赏的',
        create_time:'2024-03-20 12:00:34',
        url:'',
        user_id:7,
        comment:'的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰',
        like:1,
        like_type:true,
            }
        ]

    },
    {
        comment_id:4,
        user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nikename:'打赏的',
        create_time:'2024-03-23 12:00:34',
        user_id:7,
        comment:'的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        like:1231,
        like_type:true,
        show_type:false,
        page_num:1,
        page_size:4,
        son_num:0,
        children:[
            {
                comment_id:34,
        user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nikename:'打赏的',
        to_nikename:'的撒开',
        create_time:'2024-03-23 12:00:34',
        user_id:3,
        comment:'的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        like:1231,
        like_type:false,
            },
            {
                comment_id:34,
        user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nikename:'地方撒',
        to_nikename:'打赏的',
        create_time:'2024-03-23 12:00:34',
        user_id:7,
        comment:'的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰分嗷嗷叫发的萨拉决定了',
        url:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        like:0,
        like_type:false,
            },
            {
                comment_id:40,
        user_img:'https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080',
        nikename:'地方撒',
        to_nikename:'打赏的',
        create_time:'2024-03-20 12:00:34',
        user_id:7,
        comment:'的萨拉金克拉撒旦积分啊撒旦解放收到了二级奥克兰',
        like:1,
        like_type:true,
            }
        ]

    },
])
defineExpose({
    addComment
})
</script>
<style lang="scss" scoped>
.box{
    height: 100%;
    overflow: auto;
    margin: 0 32.051rpx;
    &::-webkit-scrollbar{
        display: none;
    }
    .header{
        position: sticky;
        z-index: 99;
        top: -1px;
        margin: 0;
        padding: 25.256rpx 0;
        width: 100%;
        background-color: #FFF;
        .text{
            text-align: center;
            color: #161823;
            font-size: 26.923rpx;
            font-weight: 550;
            letter-spacing: .02em;
        }
    }
    .mid{
        .item-box{
            display: flex;
            .left{
                .user-img{
                    --url:url(https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080);
                    width: 73.718rpx;
                    height: 73.718rpx;
                    border-radius: 50%;
                    background-image: var(--url);
                    background-position: center;
                    background-size: cover;
                }
            }
            .right{
                flex-grow: 1;
                
                margin-left: 19.231rpx;
                color: #afb0b4;
                font-size: 26.923rpx;
                line-height: 26.923rpx;
                letter-spacing: .03em;
                .user-name{
                    position: relative;
                    .delete{
                            position: absolute;
                            right: 5rpx;
                            top: 15rpx;
                        }
                }
                .content{
                    margin: 12.231rpx 0;
                    color: #161823;
                    font-size: 32.051rpx;
                    line-height: 40.051rpx;
                }
                .content-img{
                    --url:url(https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080);
                    max-width: 320.513rpx;
                    max-height: 320.513rpx;
                    min-height: 240.385rpx;
                    min-width: 240.385rpx;
                    border-radius: 6.41rpx;
                    background-image: var(--url);
                    background-position: center;
                    background-size: cover;
                }
                .feature-box{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 12.231rpx 0 12.846rpx;
                    .left{
                        display: flex;
                        align-items: center;
                        flex-grow: 1;
                        .create_time{

                        }
                        .reply{
                            margin-left: 35.256rpx;
                            font-weight: 550;
                            color: #85868c;
                        }
                    }
                    .right{
                       flex-grow: 1;
                        display: flex;
                    align-items: center;
                    justify-content: flex-end;
                        .like{
                            margin-right: 6.641rpx;
                            width: 32.051rpx;
                            height: 32.051rpx;
                        }
                        .like_num{

                        }
                    }
                }
                .reply-box{
                    display: flex;
                    .left{
                        .user-img{
                            width: 38.462rpx;
                            height: 38.462rpx;
                        }
                    }
                    .right{
                       .user-name{
                        position: relative;
                        display: flex;
                        align-items: center;
                        margin-top: 5rpx;
                        font-size: 22.436rpx;
                        .name-img{
                            width: 29.436rpx;
                            height: 29.436rpx;
                        }
                        .delete{
                            position: absolute;
                            right: 16rpx;
                            top: 0;
                        }
                       }
                        .content{
                            font-size: 32.051rpx;
                        }
                       
                    }
                }
                .bottom{
                    display: flex;
                    color: #85868c;
                    margin-bottom: 35.846rpx;
                        // font-size: 28.846rpx;
                        font-weight: 550;
                    .more{
                        &::before{
                            content: '—';
                            color: #afb0b4;
                        }
                        .more-img{
                            margin-left: 2.923rpx;
                            transform: translateY(3.641rpx);
                            width:  28.846rpx;
                        }
                    }
                    .packup{
                        margin-left: 57.692rpx;
                        .packup-img{
                            margin-left: 2.923rpx;
                            transform: translateY(3.641rpx);
                             width:  28.846rpx;
                        }
                    }
                }
            }
        }
    }
}
</style>